<template>
	<div>
		<el-upload class="avatarUploader" :action="api" :show-file-list="false" :on-success="handleAvatarSuccess"
			:before-upload="beforeAvatarUpload">
			<img v-if="imageUrl" :src="imageUrl" class="avatar" />
			<i v-else class="el-icon-plus avatar-uploader-icon editor-img-plus"></i>
		</el-upload>

		<quill-editor v-model="content" :options="editorOption" style="height: 100%;" ref="myQuillEditor"
			@input="updateParentContent"></quill-editor>
	</div>
</template>

<script>
	const toolbarOptions = [
		["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
		["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
		[{
			list: "ordered"
		}, {
			list: "bullet"
		}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
		[{
			'header': 1
		}, {
			'header': 2
		}],
		[{
			script: "sub"
		}, {
			script: "super"
		}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
		[{
			indent: "-1"
		}, {
			indent: "+1"
		}],
		[{
			size: ['small', false, 'large', 'huge']
		}], // 配置字号
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
		[{
			font: []
		}], //显示字体选择
		[{
			align: []
		}], // 对齐方式-----
		["clean"], // 清除文本格式-----
		['image'], // 链接、图片、视频-----
	];
	import apiURL from "../../src/api/apiURL.js"
	export default {
		data() {
			return {
				api: this.src,
				imageUrl: '',
				imageList: '',
				content: '',
				editorOption: {
					placeholder: '请输入文本...',
					theme: 'snow',
					modules: {
						toolbar: {
							container: toolbarOptions,
							handlers: {
								image: function(value) {
									if (value) {
										// 当点击.editor-img-plus时。触发上传图片事件
										document.querySelector('.editor-img-plus').click()
									} else {
										this.quill.format('image', false)
									}
								},
							},
						},
						imageResize: {
							//调整大小组件。
							displayStyles: {
								backgroundColor: "black",
								border: "none",
								color: "white",
							},
							modules: ["Resize", "DisplaySize", "Toolbar"],
						},
					}
				}
			}
		},
		methods: {
			updateParentContent() {
				this.onBlur()
				let data = {
					content: this.content,
					imageList: this.imageList
				}
				this.$emit('update-content', data)
			},
			// 上传前验证
			beforeAvatarUpload(file) {
				const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
				const whiteList = ["jpg", "png"];
				if (whiteList.indexOf(fileSuffix) === -1) {
					this.$message.error("上传文件只能是 jpg、png格式！");
					return false;
				}
				const isLt5M = file.size / 1024 / 1024 < 5;
				if (!isLt5M) {
					this.$message.error('上传的图片大小不能超过5MB!');
					return false;
				}
			},
			// 上传成功回调函数
			handleAvatarSuccess(res, file) {
				// 图片上传成功后的回调
				//console.log("res==>", res.data)
				let quill = this.$refs.myQuillEditor.quill
				if (res.code === 200) {
					// 获取光标所在位置
					let length = quill.getSelection().index
					// 插入图片 
					let url = apiURL.READ_IMG_URL + res.data
					//console.log("url==>", url)
					quill.insertEmbed(length, 'image', url)
					// 调整光标到最后
					quill.setSelection(length + 1)
				} else {
					this.$message.error('图片插入失败')
				}
			},
			// 获取图片
			onBlur(){
				this.imageList = ''
				let images = document.querySelectorAll(".ql-editor img");
				for (var i = 0; i < images.length; i++) {
					if (i === images.length-1){
						this.imageList += images[i].src.split('/').pop()
					}else{
						this.imageList += images[i].src.split('/').pop() + '_'
					}
					
				}
				//console.log("图片==>",this.imageList)
			},
			// 清空内容
			clear(){
				this.content = '',
				this.imageList = ''
			}

		},
		props: {
			src: {
				type: String,
				required: true
			}
		}
	}
</script>

<style>
	.avatarUploader {
		display: none;
	}

	.ql-indent-1 {
		padding-left: 0px !important;
		text-indent: 1em !important;
	}

	.ql-indent-2 {
		padding-left: 0px !important;
		text-indent: 2em !important;
	}

	.ql-indent-3 {
		padding-left: 0px !important;
		text-indent: 3em !important;
	}

	.ql-indent-4 {
		padding-left: 0px !important;
		text-indent: 4em !important;
	}

	.ql-indent-5 {
		padding-left: 0px !important;
		text-indent: 5em !important;
	}

	.ql-indent-6 {
		padding-left: 0px !important;
		text-indent: 6em !important;
	}

	.ql-indent-7 {
		padding-left: 0px !important;
		text-indent: 7em !important;
	}

	.ql-indent-8 {
		padding-left: 0px !important;
		text-indent: 8em !important;
	}
</style>